<template>
	<uni-nav-bar :shadow="true" title="个人中心" :statusBar="true" backgroundColor="#e68a4b">
	</uni-nav-bar>
	<view class="container">
        <view @click="login">
            <view class="box-hd">
                <view class="avator" style="width: 100rpx; height: 100rpx; text-align: center;">
                    <img :src="avatarUrl" style="width: 100rpx; height: 100rpx; border-radius: 50%;">
                </view>
                <view  class="phone-number" style="color: black; font-weight: 600;margin-bottom: 30rpx;">{{nickName ? nickName : "点我登录"}}</view>
            </view>
        </view>

		<uni-list>
			<uni-list-item v-if="nickName" title="服务订单" link="navigateTo" @click="onclick" to="/pages/mine/serviceList/index" show-arrow="true"/>
            <uni-list-item v-if="nickName" title="修改资料" @click="onclick" link="navigateTo" to="/pages/mine/userInfo/index" show-arrow="true"/>
            <uni-list-item v-if="nickName" title="注销登录" link="navigateTo" @click="loginOut" show-arrow="true"/>
		</uni-list>
	</view>
</template>

<script>
    import { wxlogin } from "@/API/mine.js"
	export default {
		data() {
			return {
                avatarUrl: '',
                nickName: ""
			}
		},
        
        onShow() {
            // 打开页面读取缓存
            console.log("进入登录页面")
            console.log(getApp().globalData)
            this.avatarUrl = getApp().globalData.avatarUrl
            this.nickName = getApp().globalData.nickName
        },
        
        onLoad(options) {
        	const that = this
        	uni.$on('changeUserInfo', function(res) {
        		console.log("修改用户信息");
        		that.avatarUrl = getApp().globalData.avatarUrl;
        		that.nickName = getApp().globalData.nickName;
        	})
        },
        onUnload() {
            // 清除监听
            uni.$off('changeUserInfo');
        },
        
		methods: {
            changeInfo() {
                uni.showModal({
                    confirmColor:'#f00',
                    title:'资料修改功能',
                    content:'资料修改功能完善中',
                    success() {
                    }
                })
            },
			onclick() {
			},
            
            // 登录
            login() {
                console.log(getApp().globalData);

                if (this.nickName) {
                    // 已经登录直接返回
                    console.log("已经登录");
                    return;
                }
               
                const that = this;
                uni.getUserProfile({
                    desc: '获取您的微信信息以授权小程序',
                    lang: 'zh_CN',
                    success: UserProfileRes => {  
                        uni.showLoading({title:"登录中....",mask:true})
                        console.log(UserProfileRes)

                        wx.login({
                            provider: 'weixin',
                            success: function(loginRes) {
                                console.log(loginRes);

                                const form = {};
                                const userData = UserProfileRes.userInfo || {};
                                form.code = loginRes.code; //用户code  注:用户的code每次登录都是随机的，所以不需要进行存储
                                form.avatarUrl = userData.avatarUrl; //用户头像
                                form.nickName = userData.nickName; //用户微信名
                                form.gender = userData.gender;//性别
                                uni.hideLoading();
                                
                                // that.avatarUrl = userData.avatarUrl;
                                // that.nickName = userData.nickName;

                                // 设置来源
                                let tags = getApp().globalData.tags;
                                if (!tags || tags.length==0) {
                                    tags = ["0"];
                                }
                                form.tags = tags;
                                console.log(form);
                                wxlogin(form).then(res => {
                                    console.log(res);
                                    // 登录成功设置token
                                    const loginUser = res.data || {};
                                    
                                    that.avatarUrl = loginUser.avatarUrl;
                                    that.nickName = loginUser.nickName;
                                    
                                    getApp().globalData.token = loginUser.token;
                                    getApp().globalData.nickName = loginUser.nickName;
                                    getApp().globalData.avatarUrl = loginUser.avatarUrl;
                                    getApp().globalData.gender = loginUser.gender;
                                    getApp().globalData.phoneno = loginUser.phoneno;
                                    getApp().globalData.userId = loginUser.userId;
									getApp().globalData.tags = loginUser.tags;
									
                                    // 存储登录信息 
                                    uni.setStorage({
                                        key: 'user_login_key',
                                        data: {
                                            token: getApp().globalData.token,
                                            avatarUrl: getApp().globalData.avatarUrl,
                                            nickName: getApp().globalData.nickName,
											gender: getApp().globalData.gender,
                                            phoneno: getApp().globalData.phoneno,
                                            userId: getApp().globalData.userId,
											tags: getApp().globalData.tags
                                        }
                                    });
                                    if (!getApp().globalData.phoneno || getApp().globalData.phoneno === 'null') {
                                        // 提示修改资料，并跳转
                                        uni.showModal({
                                            confirmColor:'#f00',
                                            title:'用户资料修改提示',
                                            content:'需要修改后才能提供预约服务，确定要修改吗？',
											showCancel: false,
                                            success(res) {
                                                if (res.cancel) {
                                                    return;
                                                }
                                        
                                                uni.navigateTo({
                                                    //保留当前页面，跳转到应用内的某个页面
                                                    url: '/pages/mine/userInfo/index'
                                                });
                                            }
                                        });
                                    }
                                })
                            },
                            fail(err) {
                                console.log(err)
                            }
                        });
                    },
                    fail:err=>{
                        console.log(err)
                    }
                })
            },
            
            // 退出登录
            loginOut(){
                const that = this;
                uni.showModal({
                    confirmColor:'#f00',
                    title:'注销登录提示',
                    content:'确定要注销登录吗？',
                    success(res) {
                        if (res.cancel) {
                            return;
                        }

                        that.nickName = "";
                        getApp().globalData.token = '';
                        getApp().globalData.nickName = '';
                        getApp().globalData.avatarUrl = '';
                        getApp().globalData.gender = '';
                        getApp().globalData.phoneno = '';
						getApp().globalData.tags = []
                        uni.setStorage({
                            key: 'user_login_key',
                            data: {
                            }
                        });
                        uni.showToast({
                            title: '注销登录成功，欢迎再来',
                            icon: 'none'
                        })
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height:100%
	}
	.container {
		width: 100%;
		height: 100%;
        align-items: center;
	}
    
    .box-hd{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        margin-top: 100rpx;
        .avator {
			margin-bottom: 10rpx;
            //width: 100rpx;
            //height: 100rpx;
            background: #fff;
            border: 5rpx solid #f1f1f1;
            border-radius: 50%;
            margin-top: -80rpx;
            overflow: hidden;
            margin-left: 0rpx;
            box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, 0.2);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .phone-number{
            width: 100%;
            text-align: center;
            // margin: 20rpx 0;
        }
    }
</style>
